<script setup lang="ts">
import {get, put, del, post} from "@/axios"
import {onMounted, reactive, ref, toRaw, nextTick, computed} from "vue"
import PostsInter from "@/type/posts-inter.ts";

import {ComponentSize, ElMessage} from "element-plus";
import {House} from "@element-plus/icons-vue";


const page = ref(1);
const size = ref(10);
const editOrInsert = ref(false)
const postsPanel = ref(false)
const postsForm = reactive<PostsInter>({})
const postsList = reactive([])
const departmentList = reactive([])
const pageInfo = reactive({
  total: 0,
  pageTotal: 0,
})
const postDetailsVis = ref(false)
const postDetails = ref({
  id: "",
  name: '',
  description: '',
  department: {},
  users: {},
})


const activeName = ref()

const ComSize = ref<ComponentSize>('default')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[ComSize.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[ComSize.value] || marginMap.default,
  }
})



const reloadPostsList = () => {
  get(`/Posts/GetPostAll?page=${page.value}&&size=${size.value}`).then((res: any) => {
    if (res.status == 200) {
      console.log(page.value)
      pageInfo.total = res.data.totalCount
      pageInfo.pageTotal = res.data.totalPages
      if (page.value == 1) {
        Object.assign(postsList, res.data.items)
      } else {
        new Promise((resolve) => {
          postsList.splice(0, postsList.length)
          resolve(true)
        }).then((e) => {
          if (e) {
            Object.assign(postsList, res.data.items)
          }
        })
      }
    }
  })
}
const indexMethod = (index: number) => {
  return index += 1
}


const addPostsFunc = () => {
  editOrInsert.value = true
  postsPanel.value = true
  Object.assign(postsForm, {
    id: "",
    name: "",
    description: ""
  })
}
const editPostsFunc = (data) => {
  editOrInsert.value = false
  postsPanel.value = true
  Object.assign(postsForm, data)
}
const deletePostsFunc = (row: any) => {
  del(`/Posts/DeletePost?id=${row.id}`).then((res: any) => {
    if (res.status == 200) {
      reloadPostsList()
    }
  })
}

const onSubmit = (type: string) => {
  const posts = toRaw(postsForm)
  if (editOrInsert.value) {
    post("/Posts/AddPost", posts).then((res: any) => {
      if (res.status === 200) {
        postsPanel.value = false
        reloadPostsList()
      }
    })
  } else {
    put("/Posts/UpdatePost", posts).then((res: any) => {
      if (res.status === 200) {
        ElMessage.success("修改成功")
        postsPanel.value = false
        reloadPostsList()
      }
    })
  }
}

onMounted(() => {
  reloadPostsList()
  get("/Department/GetDepartment").then((res: any) => {
    if (res.status == 200) {
      departmentList.push(...res.data)
    }
  })
})

const props = {
  value: "id",
  label: "name",
  children: "childDepartments"
}

const checkPostsFunc = async (data:any)=> {
  console.log(data)
  get(`/Posts/GetPostDetails?id=${data.id}`).then((res:any)=>{
    if(res.status == 200){
      postDetails.value.id = data.id
      postDetails.value.name = data.name
      postDetails.value.description = data.description
      postDetails.value.department = res.data.departments[0]
      postDetails.value.users = res.data.users
    }
  })
  await nextTick()
  console.log("Post Details",postDetails)
  postDetailsVis.value = true
}
const closePostsFunc = ()=> {
  postDetailsVis.value = false
  Object.assign(postDetails.value,{})
}
</script>

<template>
  <div class="posts-list-container">
    <div class="posts-table">
      <div class="title">
        <span>岗位列表</span>
        <el-button type="success" @click="addPostsFunc">添加岗位</el-button>
      </div>
      <el-scrollbar style="width: 100%;" height="500">
        <el-table
            :indent="20"
            row-key="id"
            :data="postsList"
            style="width: 100%"
        >
          <el-table-column label="序号" width="60" type="index" :index="indexMethod"/>
          <el-table-column label="岗位名称" width="200">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon>
                 <Suitcase />
                </el-icon>
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="岗位描述" width="250"/>
          <el-table-column width="260">
            <template #default="scope">
              <el-button @click="checkPostsFunc(scope.row)">查看</el-button>
              <el-button type="primary" @click="editPostsFunc(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deletePostsFunc(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <el-pagination
          v-model:page-size="size"
          background
          hide-on-single-page l
          ayout="prev, pager, next"
          :total="pageInfo.total"
          :page-count="pageInfo.pageTotal"
          v-model:current-page="page"
          @current-change="reloadPostsList"
      />
    </div>
  </div>
  <el-dialog v-model="postsPanel"
             :title="editOrInsert? '新增岗位':'编辑岗位'" width="800">
    <el-form
        label-position="left"
        :model="postsForm"
        label-width="auto"
        style="max-width: 600px">
      <el-form-item label="岗位名称">
        <el-input v-model="postsForm.name"/>
      </el-form-item>
      <el-form-item label="岗位描述">
        <el-input v-model="postsForm.description"/>
      </el-form-item>
      <el-form-item label="选择部门">
        <el-tree-select
            :props="props"
            v-model="postsForm.departmentId"
            :data="departmentList"
            check-strictly
            :render-after-expand="false"
            style="width: 240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="postsPanel = false ">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <el-dialog
      class="user-details"
      v-model="postDetailsVis"
      @close="closePostsFunc"
      title="岗位详情"
      width="900"
  >
    <el-descriptions
        style="margin-top: 5px"
        class="margin-top"
        title="岗位信息"
        :column="3"
        :size="ComSize"
        border
    >
      <el-descriptions-item >
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
             <Suitcase />
            </el-icon>
            岗位名称：
          </div>
        </template>
        {{postDetails.name}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Suitcase />
            </el-icon>
            岗位描述：
          </div>
        </template>
        {{postDetails.description}}
      </el-descriptions-item>
      <el-descriptions-item >
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            部门：
          </div>
        </template>
        <el-tag type="primary" v-if="postDetails.department.parentDepartmentName">{{postDetails.department.parentDepartmentName}}</el-tag>
        &gt<el-tag type="success">{{postDetails.department.departmentName}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item v-if="postDetails.users">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
             <Avatar />
            </el-icon>
            用户列表：
          </div>
        </template>
        <div class="posts-info">
          <div class="posts" v-for="user in postDetails.users">
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item :name="post.postId">
                <template #title>
                  <el-tag type="success">{{user.username}}</el-tag>
                </template>
                <template #default>
                  <div class="user-list">
                    <p>用户名：{{user.username}}</p>
                    <p>邮箱：{{user.email}}</p>
                    <p>号码：{{user.phone}}</p>
                  </div>
                </template>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<style scoped>
.posts-list-container {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.posts-table {
  width: 1200px;
  background-color: white;
  font-size: 18px;
}

.title {
  font-size: 20px;
  color: #283443;
  margin: 10px 5px;
  display: flex;
  justify-content: space-between;
}
</style>